<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Product } from "@/api";
let tableData = ref([]);
import Upload_Img from '@/components/Upload.vue'
import { ElMessage } from 'element-plus';

const formInline = reactive({
    page: 1,
    limit: 15,
    is_show: '',
    pid: '',
    cate_name: '',
})

// 加载分类列表
let product_cate = ref([])
let load_product_cate = async () => {
    let { status, msg, data } = await Product.category_tree(0);
    if (status) {
        product_cate.value = data;
    }
}
// 加载商品列表
let load_product_list = async (form) => {
    let { status, msg, data } = await Product.get_product_category(form);
    tableData.value = data.list
}
onMounted(() => {
    load_product_cate();
    load_product_list();
})
// 搜索
let handle_check_cate = (id) => {
    load_product_list({ pid: id })
}
let check_is_show = () => {
    load_product_list({ is_show: formInline.is_show })
}
let search_product = () => {
    load_product_list(formInline)
}
// 状态
let change_status = async (id, is_show) => {
    let { status, msg } = await Product.category_set_show(id, is_show);
    if (status) {
        ElMessage.success(msg);
    }
}
// 新增表单
let is_add_cate = ref(false)
let add_cate_form = ref({})
let cate_title = ref('');
let add_categroy = async () => {
    let { status, msg, data } = await Product.create_category();
    if (status) {
        is_add_cate.value = true;
        add_cate_form.value = data.rules
        cate_title.value = data.title
        console.log(data);
    }
}
// 编辑表单
let edit_cate_id = ref(0);
let handle_edit_cate = async (id) => {
    edit_cate_id.value = id;
    let { status, msg, data } = await Product.create_category_edit(id);
    if (status) {
        is_add_cate.value = true;
        add_cate_form.value = data.rules
        cate_title.value = data.title
        console.log(data);
    }
}
// 保存

let handle_save_cate = async () => {
    if (edit_cate_id.value === 0) {
        let form = {
            pid: add_cate_form.value[0].value,
            cate_name: add_cate_form.value[1].value,
            pic: add_cate_form.value[2].value,
            big_pic: add_cate_form.value[3].value,
            sort: add_cate_form.value[4].value,
            is_show: add_cate_form.value[5].value,
        }
        let { status, msg } = await Product.category_add(form);
        if (status) {
            is_add_cate.value=false;
            load_product_list();
            ElMessage.success(msg)
        }
    }else{
        let form = {
            pid: add_cate_form.value[0].value,
            cate_name: add_cate_form.value[1].value,
            pic: add_cate_form.value[2].value,
            big_pic: add_cate_form.value[3].value,
            sort: add_cate_form.value[4].value,
            is_show: add_cate_form.value[5].value,
        }
        let { status, msg } = await Product.category_edit(edit_cate_id.value,form);
        if (status) {
            is_add_cate.value=false;
            load_product_list();
            ElMessage.success(msg)
        }
    }
}
// 删除
let handle_remove_cate = async (id) => {
    ElMessageBox.confirm(
        '是否确认删除?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let { status, msg } = await Product.remove_category(id);
            if (status == 200) {
                ElMessage.success(msg)
                load_product_list();
            } else {
                ElMessage.error(msg)
            }
        })
        .catch(() => {
            ElMessage.info('取消')
        })
}
</script>

<template>
    <el-card class="box-card">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="商品分类" prop="pid">
                <el-select v-model="formInline.pid" clearable placeholder="请选择商品分类">
                    <el-option v-for="item in product_cate" :label="item.cate_name" :value="item.id"
                        @click="handle_check_cate(item.id)" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类状态" prop="is_show">
                <el-select v-model="formInline.is_show" clearable @change="check_is_show" placeholder="请选择商品分类">
                    <el-option label="显示" :value="1" />
                    <el-option label="隐藏" :value="0" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 30%;" label="商品搜索" prop="cate_name">
                <el-input v-model="formInline.cate_name" style="width: 80%;" placeholder="请输入商品名称" />
                <el-button type="primary" @click="search_product">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="add_categroy">添加分类</el-button>
        <el-table :data="tableData" row-key="id" style="width: 100%;margin-top: 15px;" :header-cell-style="{backgroundColor:'#ececec'}">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="cate_name" label="分类名称" />
            <el-table-column prop="pic" label="分类图标">
                <template #default="scope">
                    <el-image v-show="scope.row.pic" style="width: 50px;" :src="scope.row.pic" />
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="is_show" label="状态">
                <template #default="scope">
                    <el-switch @change="change_status(scope.row.id, scope.row.is_show)" v-model="scope.row.is_show"
                        inline-prompt :active-value="1" :inactive-value="0" active-text="显示" inactive-text="隐藏" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" @click="handle_edit_cate(scope.row.id)" size="small">编辑</el-button>
                    <el-button link type="primary" @click="handle_remove_cate(scope.row.id)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog v-model="is_add_cate" :title="cate_title">
        <el-form :model="add_cate_form">
            <el-form-item v-for="item in add_cate_form" :label="item.title" :value="item.value" :prop="item.field">
                <el-select v-if="item.type === 'select'" clearable v-model="item.value" placeholder="请选择商品分类">
                    <el-option v-for="item in item.options" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-if="item.type === 'input'" v-model="item.value" style="width: 30%;"></el-input>
                <Upload_Img v-if="item.type === 'frame'"></Upload_Img>
                <el-input-number v-if="item.type === 'inputNumber'" v-model="item.value" :min="0" :max="100"
                    controls-position="right" />
                <el-radio-group v-if="item.type === 'radio'" v-model="item.value" class="ml-4">
                    <el-radio v-for="opt in item.options" :label="opt.value" :value="opt.value">{{ opt.label }}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handle_save_cate" style="width: 100%;">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>